<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>折线图</title>
  <link rel="stylesheet " type="text/css " href="css/globle.css " />
  <link rel="stylesheet " type="text/css " href="css/style.css " />
  <script src='js/jquery-2.0.3.js'></script>
  <style type="text/css">    
    #main {
      width: 800px;
      height: 400px;
    }
  </style>
  <!-- Echarts js -->
  <script src="source/echarts-all.js"></script>  
</head>

<body>
<div id="main"></div>
</body>

</html>
<script type="text/javascript">
$(function() {
  // 图表实例化------------------
  // srcipt标签式引入
  var myChart = echarts.init(document.getElementById('main'));

  // 过渡---------------------
  myChart.showLoading({
      text: '正在努力的读取数据中...',    //loading话术
  });

  // ajax getting data...............

  // ajax callback
  myChart.hideLoading();


  // 配置图表显示
  var option = {
    title: {
      show: false,
      text: '',
      subtext: ''
    },
    color: [
      '#96d8ff'
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#0085d0',
          width: 0,
          type: 'solid'
        }
      },
      backgroundColor: 'rgba(0,0,0,.5)'
    },
    legend: {
      show: false,
      data: ['意向']
    },
    grid: {
      x: 40,
      y: 30,
      x2: 42,
      y2: 31,
      borderWidth: 0,
      backgroundColor: 'rgba(255,255,255,1)'
    },
    toolbox: {
      show: false,
      feature: {
        mark: {
          show: true
        },
        dataView: {
          show: true,
          readOnly: false
        },
        magicType: {
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    calculable: false,
    xAxis: [{
      name: "标签",
      type: 'category',
      boundaryGap: false,
      data: ['一', '二', '三', '四', '五', '六', '日'],
      axisTick: false,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#e6e6e6",
          type: "dotted",
          width: "1"
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#8896a4'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#8896a4",
          width: "1"
        }
      }

    }],
    yAxis: [{
      name: "[TOP]",
      type: 'value',
      axisTick: true,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#e6e6e6",
          type: "dotted",
          width: "1"
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#8896a4'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#8896a4",
          width: "1"
        }
      }

    }],
    series: [{
      name: '数据',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          },
          borderColor: '#0c8bd2',
          borderWidth: '1',
          lineStyle: {
            color: "#4aa8dd",
            type: "solid",
            width: "1"
          },
          areaStyle: {
            color: 'rgba(196,226,243,0.3)',

          }
        },
        emphasis: {
          borderColor: '#0c8bd2',
          borderWidth: '1',
        }
      },
      data: [28, 26, 28, 31, 26, 24, 26]
    }]
  };


  // 为echarts对象加载数据
  myChart.setOption(option);


})
</script>